<template>
  <div class="grid-container">
    <div class="grid-box">

      <div class="item-container">
        <slot class="grid-item" ref="item-slot"
          style="{ width: 'calc(100' + '%/' + gridShowNum + ')', aspectRatio: aspectRatio }">

        </slot>
      </div>

    </div>
  </div>
</template>
<!-- :style="{ width: 'calc(100' + '%/' + gridShowNum + ')', aspectRatio: aspectRatio }" -->
<script>


export default {
  name: 'Grid',
  props: {
    gridNum: {
      type: Number,
      default: 0
    },
    gridShowNum: {
      type: Number,
      default: 4
    },
    aspectRatio: {
      type: String,
      default: '0.75'
    }
  },
  data() {
    return {
      cale: 1
    }
  },
  computed: {
    cssVars() {
      return {
        "--cale": this.cale
      };
    }
  },
  mounted() {
    console.log(document.getElementsByClassName('grid-item').style)
  },
  watch: {

  }
}

</script>
<style  lang="less" scoped>
* {
  margin: 0%;
  padding: 0%;
}

.grid-container {
  width: 100%;
  height: 100%;

  .grid-box {
    position: relative;
    // left: 5%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item-container {
      position: relative;
      // left: 5%;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      // flex-basis: 25%;

      .grid-item {

        // max-width: 300px;
        // flex-basis: 25%;
        height: auto;
        padding: 10px 5px 10px 5px;
        box-sizing: border-box;
        // min-width: 200px;
        display: flex;
        flex-direction: column;
      }
    }

    .item-container {

      .grid-item {
        flex-basis: calc(90% / 4);
        height: auto;
        padding: 10px 5px 10px 5px;
        box-sizing: border-box;
        // min-width: 200px;
        display: flex;
        flex-direction: column;
      }
    }


  }
}
</style>